<template>
    <div class="main" ref="breadcrumb-main">
        <ul>
            <li class="fl breadcrumb-box">
                <a class="pointer" @click="goToHistory(-1)"
                   :style="{color:breadcrumbData.length === 0 ? '#333333' : '#999999'}"
                   v-text="initFileData.name || '全部文件'"></a>
            </li>
            <li class="fl breadcrumb-box" v-if="showEllipsis">
                <span class="icon">></span>
                <a class="pointer">...</a>
            </li>
            <li v-for="(value,key) in breadcrumbData" :key="key" class="fl breadcrumb-folder breadcrumb-box">
                <span class="icon">></span>
                <a class="pointer" :style="{color:breadcrumbData.length === key + 1 ? '#333333' : '#999999'}"
                   @click="goToHistory(key,value)" v-text="value.name"></a>
            </li>
        </ul>

        <div v-if="breadcrumbData.length > 0" class="relative fl icon-box">
            <img class="attention-icon"
                 :src="currentFolderData.focus ? '/icon/attention_icon.png' : '/icon/not_attention_icon.png'">
            <img class="label-icon" src="@/assets/icon/label-icon.png">
            <div class="tags-icon-hover">
                <ul>
                    <li v-for="(tag,key) in currentFolderData.tags" :key="key" v-text="tag" class="fl"></li>
                </ul>
            </div>
        </div>

    </div>
</template>

<script>
  export default {
    name: "Breadcrumb",
    data() {
      return {
        breadcrumbList: [],
        showEllipsis: false
      }
    },
    props: {
      callback: {
        type: Function,
        default: function () {

        }
      },
      initFileData: {
        type: Object,
        default: function () {
          return {
            name: '全部文件',
            fileId: ''
          }
        }
      },
      windowWidth: {
        type: Number,
        default: function () {
          return 1100
        }
      },
      breadcrumbData: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    beforeRouteLeave(to, from, next) {
      window.removeEventListener('popstate')
      next()
    },
    model: {
      prop: 'breadcrumbData',
      event: 'change'
    }, mounted() {
      this.breadcrumbList = this.breadcrumbData
      const that = this
      window.addEventListener('popstate', function () {
        if (that.breadcrumbData.length > 1) {
          const key = that.breadcrumbData.length - 2
          that.goToHistory(key, that.breadcrumbData[key])
        } else if (that.breadcrumbData.length === 1) {
          that.goToHistory(-1)
        }
      });
      // this.$router.beforeEach(function(to, from,next){
      //   console.log(to,from)
      //   // if(that.breadcrumbData.length === 0){
      //   //   next()
      //   // }else{
      //   //   that.$router.push(from)
      //   // }
      //   next()
      //
      //   console.log(window.history)
      //
      //   console.log(that.$router)
      //
      //
      // })
    },
    computed: {
      currentFolderData() {
        return this.breadcrumbData[this.breadcrumbData.length - 1]
      }
    },
    watch: {
      breadcrumbData: function () {
        this.breadcrumbList = this.breadcrumbData
        const that = this
        this.$nextTick(function () {
          that.rebuild()
        })
      },
      windowWidth: function () {
        const that = this
        this.$nextTick(function () {
          that.rebuild()
        })
      }
    },
    methods: {
      goToHistory: function (key, fileData) {
        const that = this
        this.breadcrumbList = this.breadcrumbList.slice(0, key + 1)
        this.$emit('change', this.breadcrumbList)
        this.$nextTick(function () {
          that.rebuild()
        })
        this.callback(fileData)
      },
      rebuild: function () {
        let breadcrumbDocs = document.getElementsByClassName('breadcrumb-folder')
        let folderNum = breadcrumbDocs.length
        const boxWidth = this.$refs['breadcrumb-main'].clientWidth - 130
        let liWidth = 0
        let lastOne = 0
        for (let i = (folderNum - 1); i > -1; i--) {
          if (liWidth > boxWidth) {
            breadcrumbDocs[i].style.display = 'none'
          } else {
            breadcrumbDocs[i].style.display = 'block'
            liWidth = liWidth + breadcrumbDocs[i].clientWidth
            lastOne = i
          }
        }
        if (liWidth < boxWidth) {
          this.showEllipsis = false
        } else {
          this.showEllipsis = true
          breadcrumbDocs[lastOne].style.display = 'none'
        }
      }
    }
  }
</script>

<style scoped>

    .attention-icon {
        margin: 0 10px;
        height: 15px;
        width: 15px;
    }

    .label-icon {
        height: 15px;
        width: 15px;
    }

    .label-icon:hover + .tags-icon-hover {
        display: block;
    }

    .icon-box {

    }

    .tags-icon-hover {
        background: #FFFFFF;
        box-shadow: 0 1px 6px 0 rgba(157, 163, 165, 0.50);
        height: 40px;
        position: absolute;
        width: auto;
        top: 22px;
        display: none;
    }

    .tags-icon-hover ul {
        padding: 10px 10px 10px 20px;
        width: auto;
        height: 40px;
        box-sizing: border-box;
        min-width: 1px;
        display: -webkit-flex;
        justify-content: center;
        align-items: center;
    }

    .tags-icon-hover ul li {
        white-space: nowrap;
        background: #FFFFFF;
        border: 1px solid #D8D9E5;
        font-size: 10px;
        color: #666666;
        letter-spacing: 0.71px;
        line-height: 17px;
        padding: 0 5px;
        float: left;
        margin-right: 10px;
    }

    .main {
        width: calc(100vw - 580px);
        float: left;
    }

    .breadcrumb-box {
        line-height: 20px;
        font-size: 14px;
    }

    .pointer {
        cursor: pointer;
        color: #999999;
    }

    .icon {
        margin: 5px;
        color: #999999;
    }
</style>
